<template>
    <div class="factorG">
        <div class="searchs">
            <input v-model="searchString" type="text" class="search" placeholder="请输入厂家名称进行查询!"/>
        </div>
        <div class="choice">
            <div class="choiceItem">
                <text class="place">厂家代码</text>
            </div>
            <div class="sure cjmc" @click="sureBtn">
                <text class="sureItem">厂家名称</text>
            </div>
        </div>
        <list
        ref="scroller"
        class="listCont">
            <cell class="listContItem" v-for="(item, index) in filteredArticles" :key="index" @click="polling(index)" :class="[index === activeIndex ? 'active' : '']">
                <div class="choiceItem itemRight" :class="[index === activeIndex ? 'active' : '']"><text class="text"  :class="[index === activeIndex ? 'active' : '']" ref="dm">{{item.GSDM}}</text></div>
                <div class="sure" :class="[index === activeIndex ? 'active' : '']"><text class="text"  :class="[index === activeIndex ? 'active' : '']" ref="item">{{item.GSMC}}</text></div>
            </cell>
        </list>
    </div>
</template>
<script>
import event from '@/net/event.js';
import { getCache } from '@/util/storageUtils';
import { CTCE_USER_INFO } from '@/config/storageTypes';
export default {
    name: 'factorG',
    data(){
        return {
            datalist: [],
            activeIndex: null,
            resData: '',
            searchString: ''
        }
    },
    beforeCreate() {
        this.$notice.loading.show()
        this.$navigator.setLeftItem({
            text: '   ',
            fontSize: '40',
            fontWeight: 'bold'
        }, () => {
            this.$router.back()
        })
    },
    created(){
        this.getData()
    },
    computed: {
        filteredArticles: function () {
            var articles_array = this.datalist,
            searchString = this.searchString;
            if(!searchString){
                return articles_array;
            }
            searchString = searchString.trim();
            articles_array = articles_array.filter(function(item){
                if(item.GSMC.indexOf(searchString) !== -1){
                    return item;
                } 
            })
            return articles_array;
        }
    },
    methods: {
        getData () {
            getCache(CTCE_USER_INFO).then(val => {
                event.SBCJ(val.xzqhdm).then(res => {
                    this.datalist = res.result.datalist
                    this.$notice.loading.hide()
                })
            })
        },
        polling(index){
            this.activeIndex = index;
            this.$router.getParams().then(resData => {
                this.resData = resData.name
                this.$router.setBackParams({
                    name: this.resData,
                    data: this.$refs.item[index].attr.value,
                    dm: this.$refs.dm[index].attr.value
                })
                setTimeout(() => {
                    this.$router.back()
                }, 100)
            })
        },
    }
}
</script>
<style scoped>
.searchs{
  background-color: #1DA1F2;
  padding-bottom: 12px;
  align-items: center;
}
.search{
  width: 600px;
  height: 58.3px;
  border-top-left-radius: 60.4px;
  border-top-right-radius: 60.4px;
  border-bottom-left-radius: 60.4px;
  border-bottom-right-radius: 60.4px;
  background-color: #fff;
  padding-left: 25px;
  padding-right: 25px;
}
.listCont{
    width: 750px;
}
.listContItem{
    border-bottom-color: #ccc;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    width: 750px;
    height: 100px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.text{
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.choice{
    width: 750px;
    height: 100px;
    background-color: rgba(238,238,238,1);
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.choiceItem{
    width: 200px;
    border-right-color:rgba(62,175,252,1);
    border-right-style: solid;
    border-right-width: 1px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.itemRight{
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 1px;
}
.sure{ 
    width: 475px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30px;
}
.place{
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
}
.sureItem{
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
}
.active{
    background-color: rgba(204,204,204,1);
    color: #fff;
}
</style>
